<template>
	<view class="agent-home">
		<view class="top-box">
			<view class="nav-bar">
				<view class="status-bar"> </view>
				<!-- 导航栏 -->
				<view class="nav">
					<view class="left">
						<image src="/static/icon/navbar/left.png" @tap="goBack" class="left" />
					</view>
					<view class="center"> 代理商 </view>
					<view class="right"> 
						<image src="/static/icon/rider/message.png" @tap="message" class="r-img"/>
					</view>
				</view>
			</view>
			<!-- 供应商信息 -->
			<view class="agent-info" @tap="goAgentInfo">
				<image :src="agentInfo.avatar" class="avatar" />
				<view class="agent-details">
					<view class="agent-name"> {{agentInfo.name}} </view>
					<view class="agent-address"> 负责城市：{{agentInfo.apply.site_code}} </view>
					<view class="agent-id"> 代理商编号：{{agentInfo.apply.id}}  </view>
				</view>
			</view>
		</view>
		<view class="content">
			<!-- 分红-总收益 -->
			<view class="total-price">
				<view class="dividend">
					<view class="d-item">
						<view class="label"> 今日分红(元) </view>
						<view class="value"> {{agentInfo.company_deposit_day}}</view>
					</view>
					<view class="d-item">
						<view class="label"> 总收益(元) </view>
						<view class="value"> {{agentInfo.company_deposit}} </view>
					</view>
				</view>
				<view class="underling">
					<view class="u-item"> 下属商户：{{agentInfo.son_shop}} </view>
					<view class="u-item"> 下属外卖员：{{agentInfo.son_rider}} </view>
				</view>
			</view>
			<!-- list 项 -->
			<view class="my-wallet">
				<view class="item" @tap="goMyWallect">
					<view class="label">
						<image src="/static/icon/agent/price.png" class="l-img"/>
						<text> 我的钱包 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
				<view class="item" @tap="goWithdrawal">
					<view class="label">
						<image src="/static/icon/rider/wallect.png" class="l-img"/>
						<text> 提现设置 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
			</view>
			<view class="shop-manage">
				<view class="item" @tap="goShopManage">
					<view class="label">
						<image src="/static/icon/rider/list.png" class="l-img"/>
						<text> 商户管理 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img"/>
					</view>
				</view>
				<view class="item" @tap="goRiderManage">
					<view class="label">
						<image src="/static/icon/rider/timeup.png"  class="l-img"/>
						<text> 骑手管理 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png" class="v-img" />
					</view>
				</view>
				<view class="item" @tap="goInvite('商户邀请')">
					<view class="label">
						<image src="/static/icon/rider/location.png"  class="l-img"/>
						<text> 商户邀请 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png"  class="v-img"/>
					</view>
				</view>
				<view class="item"  @tap="goInvite('骑手邀请')">
					<view class="label">
						<image src="/static/icon/agent/yqrider.png"  class="l-img"/>
						<text> 骑手邀请 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png"  class="v-img"/>
					</view>
				</view>
			</view>
			<view class="agent-ins">
				<view class="item" @tap="goAgentDesc">
					<view class="label">
						<image src="/static/icon/agent/order.png" class="l-img" />
						<text> 代理商说明 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png"  class="v-img"/>
					</view>
				</view>
				<view class="item" @tap="call">
					<view class="label">
						<image src="/static/icon/mine/kf.png"  class="l-img"/>
						<text> 联系客服 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png"  class="v-img"/>
					</view>
				</view>
				<view class="item" @tap="goComplainManage">
					<view class="label">
						<image src="/static/icon/agent/th.png"  class="l-img"/>
						<text> 投诉管理 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png"  class="v-img"/>
					</view>
				</view>
			</view>
			<view class="logout">
				<view class="item" @tap="logout">
					<view class="label">
						<image src="/static/icon/rider/logout.png"  class="l-img"/>
						<text> 退出登录 </text>
					</view>
					<view class="value">
						<image src="/static/icon/order/right.png"  class="v-img"/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { GetAgentDetailsApi } from '@/service/agent.js'
	import { useAgentStore, useCommStore } from '@/store/index.js'
	const agentInfo = ref({
		apply: {
			id: 47, //代理商编码
			site_code: "", //负责城市
			mobile: "",
			id_img_1: "", //身份证正面
			id_img_2: "", //身份证反面
			id_img_3: "" //手持身份证
		}, //申请资料信息
		avatar: "g", //代理头像
		id: 1, //用户ID
		name: "", //代理昵称
		company_deposit: "", //总收益
		company_deposit_day: "", //今日分红
		son_shop: 0, //下属商户
		son_rider: 0 //下属外卖员
	})
	const goAgentInfo = () => {
		uni.navigateTo({
			url: `/pages/riderAndShopInfo/riderAndShopInfo?page=agent&info=${JSON.stringify(agentInfo.value)}`
		})
	}
	const goBack = () => {
		uni.navigateBack()
	}
  const call = () => {
    const { comm } = useCommStore()
    uni.makePhoneCall({ phoneNumber: comm.hellp_mobile4 })
  }
	const message = () => {
		console.log('message');
		uni.navigateTo({
			url: '/pages/agentPages/msgTips/msgTips'
		})
	}
	const goMyWallect = () => {
		uni.navigateTo({
			url: '/pages/agentPages/myWallect/myWallect'
		})
	}
	const goWithdrawal = () => {
		uni.navigateTo({
			url: '/pages/riderPages/withdrawal/withdrawal'
		})
	}
	const goShopManage = () => {
		uni.navigateTo({
			url: '/pages/agentPages/shopManage/shopManage'
		})
	}
	const goRiderManage = () => {
		uni.navigateTo({
			url: '/pages/agentPages/riderManage/riderManage'
		})
	}
	const goInvite = (title) => {
		uni.navigateTo({
			url: `/pages/agentPages/invite/invite?title=${title}&agent_name=${agentInfo.value.name}`
		})
	}
	const goAgentDesc = () => {
		uni.navigateTo({
			url: '/pages/agentPages/agentDesc/agentDesc'
		})
	}
	const goComplainManage = () => {
		uni.navigateTo({
			url: '/pages/agentPages/complainManage/complainManage'
		})
	}
	const getAgentInfo = () => {
		const { SETAGENTINFO } = useAgentStore()
		GetAgentDetailsApi().then(res => {
			agentInfo.value = res.data
			SETAGENTINFO(res.data)
		})
	}
  const logout = () => {
    uni.switchTab({
      url: '/pages/index/index'
    })
  }
	onShow(() => {
		getAgentInfo()
	})
</script>

<style lang="scss" scoped>
	.agent-home {
		.top-box {
			// display: flex;
			padding: 0 12px;
			background: linear-gradient( 180deg, #FFEFED 17%, rgba(255,255,255,0) 94%);
			.nav-bar {
				margin-bottom: 10px;
				.status-bar {
					height: var(--status-bar-height);
					width: 100%;
				}
				.nav {
					height: 44px;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.left {
						width: 16px;
						height: 16px;
					}
					.center {
						font-size: 16px;
					}
					.right {
						width: 16px;
						height: 16px;
						.r-img {
							width: 20px;
							height: 20px;
						}
					}
				}
			}
			.agent-info {
				display: flex;
				.avatar {
					width: 60px;
					height: 60px;
					margin-right: 7px;
					border-radius: 50%;
				}
				.agent-details {
					.agent-name {
						color: #333333;
						font-size: 16px;
						font-weight: 500;
						line-height: 19px;
						margin-bottom: 7px;
					}
					.agent-address {
						color: #666666;
						font-size: 12px;
						font-weight: 400;
						line-height: 22px;
					}
					.agent-id {
						color: #666666;
						font-size: 12px;
						font-weight: 400;
						line-height: 22px;
					}
				}
			}
		}
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
			.total-price {
				margin-bottom: 10px;
				border-radius: 10px;
				padding: 13px 12px 10px;
				border: 1px solid #FFFFFF;
				background: linear-gradient( 314deg, #FF8508 0%, #FF4847 100%);
				.dividend {
					display: flex;
					padding-bottom: 12px;
					border-bottom: 1px solid rgba(255,239,237,0.6314);
					.d-item {
						flex: 1;
						.label {
							font-weight: 400;
							font-size: 12px;
							color: #FFFFFF;
							line-height: 22px;
						}
						.value {
							font-weight: 500;
							font-size: 18px;
							color: #FFFFFF;
							line-height: 22px;
						}
					}
				}
				.underling {
					display: flex;
					padding-top: 8px;
					.u-item {
						flex: 1;
						font-weight: 400;
						font-size: 12px;
						color: #FFFFFF;
						line-height: 17px;
					}
				}
			}
			.my-wallet, .shop-manage, .agent-ins, .logout {
				padding: 0 12px;
				border-radius: 10px;
				margin-bottom: 10px;
				background-color: #fff;
				box-sizing: border-box;
				.item {
					height: 50px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.label {
						display: flex;
						align-items: center;
						.l-img {
							width: 22px;
							height: 22px;
							margin-right: 10px;
						}
						text {
							font-weight: 400;
							font-size: 16px;
							color: #333333;
							line-height: 22px;
						}
					}
					.value {
						.v-img {
							width: 14px;
							height: 14px;
						}
					}
				}
			}
		}
	}
</style>
